import { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';

// 设备类型枚举
export const DEVICE_TYPE = {
  MOBILE: 'mobile',
  TABLET: 'tablet'
};

// 断点配置（React Native中主要区分手机和平板）
const BREAKPOINTS = {
  tablet: 768
};

/**
 * React Native版本的设备检测Hook
 * @returns {Object} 包含设备类型和相关状态的对象
 */
export const useDeviceRN = () => {
  const [deviceType, setDeviceType] = useState(DEVICE_TYPE.MOBILE);
  const [screenData, setScreenData] = useState(Dimensions.get('window'));

  useEffect(() => {
    const onChange = (result) => {
      setScreenData(result.window);
      
      const { width } = result.window;
      if (width >= BREAKPOINTS.tablet) {
        setDeviceType(DEVICE_TYPE.TABLET);
      } else {
        setDeviceType(DEVICE_TYPE.MOBILE);
      }
    };

    // 初始化设备类型
    const { width } = screenData;
    if (width >= BREAKPOINTS.tablet) {
      setDeviceType(DEVICE_TYPE.TABLET);
    } else {
      setDeviceType(DEVICE_TYPE.MOBILE);
    }

    // 添加屏幕尺寸变化监听器
    const subscription = Dimensions.addEventListener('change', onChange);

    // 清理监听器
    return () => subscription?.remove();
  }, []);

  return {
    deviceType,
    screenData,
    screenWidth: screenData.width,
    screenHeight: screenData.height,
    isMobile: deviceType === DEVICE_TYPE.MOBILE,
    isTablet: deviceType === DEVICE_TYPE.TABLET
  };
};